<template>
  <view class="empty-message">
    <view
      v-for="(item, index) in types"
      v-if="street ? typeToStreetImg[item] : typeToIndustryImg[item]"
      :key="item"
      class="empty-message__item"
      :style="{
        top: index * 75 + 'px',
        backgroundImage: `url(${street ? typeToStreetImg[item] : typeToIndustryImg[item]})`,
      }"
    ></view>
  </view>
</template>

<script>
import streetEmpty1 from '@/static/map/street_1_empty.png'
import streetEmpty2 from '@/static/map/street_2_empty.png'
import streetEmpty3 from '@/static/map/street_3_empty.png'
import streetEmpty4 from '@/static/map/street_4_empty.png'
import streetEmpty5 from '@/static/map/street_5_empty.png'
import streetEmpty6 from '@/static/map/street_6_empty.png'
import streetEmpty7 from '@/static/map/street_7_empty.png'

import industryEmpty1 from '@/static/map/industry_1_empty.png'
import industryEmpty2 from '@/static/map/industry_2_empty.png'
import industryEmpty3 from '@/static/map/industry_3_empty.png'
import industryEmpty4 from '@/static/map/industry_4_empty.png'
import industryEmpty5 from '@/static/map/industry_5_empty.png'
import industryEmpty6 from '@/static/map/industry_6_empty.png'
import industryEmpty7 from '@/static/map/industry_7_empty.png'

export default {
  props: {
    types: {
      type: Array,
      default: () => [],
    },
    street: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      typeToStreetImg: {
        1: streetEmpty1,
        2: streetEmpty2,
        3: streetEmpty3,
        4: streetEmpty4,
        5: streetEmpty5,
        6: streetEmpty6,
        7: streetEmpty7,
      },
      typeToIndustryImg: {
        1: industryEmpty1,
        2: industryEmpty2,
        3: industryEmpty3,
        4: industryEmpty4,
        5: industryEmpty5,
        6: industryEmpty6,
        7: industryEmpty7,
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.empty-message__item {
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 75px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  margin-bottom: 15px;
  animation: fadeInDown 0.5s ease forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 20rpx);
  }
}
</style>
